<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
    <script src="jquery-3.3.1.slim.js"></script>
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <!--css文件-->
    <link rel="stylesheet" href="css/style.css">
    <!--字体图标文件-->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">

</head>

<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
            <a class="navbar-brand" href="index.html"><img src="images/logo.jpg" alt="" width="45"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="class.html">分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="blog.html">博客</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">联系</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="me-sm-2" type="search" placeholder="搜索">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
                </form>
            </div>
        </nav>

        <div class="border row bg-white m-0 px-3 pt-4 pb-5 blog-border">
            <div class="col-8">
                <div>
                    <h4><i class="fa fa-smile-o me-2"></i><span>我的足迹</span></h4>
                    <hr />
                    <div class="mb-3">
                        <i class="fa fa-user-o"></i><span class="ms-1 me-2">欢欢</span>
                        <i class="fa fa-clock-o"></i><span class="ms-1 me-2">15天前</span>
                        <a href="#" class="ms-1 me-2"><i class="fa fa-commenting-o"></i>156条</a>
                    </div>
                    <img class="img-fluid mb-3" src="images/005.jpg" alt="">
                    <div>
                        <p class="retract">
                            一个人旅行，一台相机足以，不理会繁杂的琐事，自由自在地，去体验一个城市，一段故事，留下一片欢笑。
                        </p>
                    </div>
                </div>
                <div class="my-5">
                    <h4><i class="fa fa-smile-o me-2"></i><span>我的足迹</span></h4>

                    <hr />
                    <div class="mb-3">
                        <i class="fa fa-user-o"></i><span class="ms-1 me-2">欢欢</span>
                        <i class="fa fa-clock-o"></i><span class="ms-1 me-2">10天前</span>
                        <a href="#" class="ms-1 me-2"><i class="fa fa-commenting-o"></i>10条</a>
                    </div>
                    <img class="img-fluid mb-3" src="images/002.jpg" alt="">
                    <div>
                        <p class="retract">
                            早晨我起的很晚，太阳以当空高照。
                            我挣扎的起了身，很快的洗漱，出门上班。
                            无奈因为时间走的太快，所以一直在追赶。
                            希望驻足脚步，等等我的愿望，是不是过于奢侈。
                            在烈日的照耀下，即使有秋风，我也感觉闷热难耐。
                            在追赶的旅程中，希望插上翅膀，展翅翱翔。
                        </p>
                    </div>
                </div>
                <a href="#" class="btn btn-info btn-block">更多</a>
            </div>
            <div class="col-4">
                <h4 class="shadow mb-4"><span class="mx-2">推荐旅游圣地</span><i class="fa fa-bicycle"></i></h4>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item border-top-0"><i class="fa fa-hand-o-right me-3"></i>神秘奇幻、佳景荟萃的九寨沟</li>
                    <li class="list-group-item"><i class="fa fa-hand-o-right me-3"></i>奇伟俏丽、灵秀多姿的黄山</li>
                    <li class="list-group-item"><i class="fa fa-hand-o-right me-3"></i>青山碧水、银滩巨磊的三亚</li>
                    <li class="list-group-item"><i class="fa fa-hand-o-right me-3"></i>山青、水秀、洞奇、石美的桂林山水</li>
                    <li class="list-group-item border-bottom"><i class="fa fa-hand-o-right me-3"></i>山水秀丽、景色宜人的杭州西湖</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>